<template>
	<view class="container">
		<!-- 店铺信息卡片 -->
		<view class="info-card">
			<view class="card-header">
				<text class="shop-name">{{ shopInfo.restaurant_name }}</text>
				<uni-icons type="shop" size="32" color="#3b82f6" />
			</view>

			<!-- 基本信息列表 -->
			<view class="info-list">
				<view class="info-item">
					<uni-icons type="location" size="20" color="#666" />
					<text class="label">校区地址：</text>
					<text class="value">{{ shopInfo.campus_address }} {{ shopInfo.location }}</text>
				</view>

				<view class="info-item">
					<uni-icons type="phone" size="20" color="#666" />
					<text class="label">联系电话：</text>
					<text class="value">{{ shopInfo.contact_phone }}</text>
				</view>

				<view class="info-item">
					<uni-icons type="time" size="20" color="#666" />
					<text class="label">营业时间：</text>
					<text class="value">{{ formattedHours }}</text>
				</view>

				<view class="info-item">
					<uni-icons type="person" size="20" color="#666" />
					<text class="label">负责人：</text>
					<text class="value">{{ shopInfo.manager_name }}</text>
				</view>
			</view>
		</view>

		<!-- 详细信息板块 -->
		<view class="detail-sections">
			<!-- 评分信息 -->
			<view class="section">
				<view class="section-header">
					<text class="section-title">店铺评分</text>
					<view class="decor-line"></view>
				</view>
				<view class="rating-box">
					<uni-rate :value="Number(shopInfo.rating)" size="18" color="#ffd21e" />
					<text class="rating-text">{{ shopInfo.rating }} 分</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		queryResturantDetail
	} from '../../request/api.js'
	import {
		useUserStore
	} from '../../stores/user.js'

	// 店铺信息数据
	const shopInfo = ref({
		campus_address: "",
		campus_name: "",
		contact_phone: "",
		location: "",
		manager_name: "",
		opening_hours: "",
		rating: "0.0",
		restaurant_id: 0,
		restaurant_name: "",
		school_name: ""
	})

	// 格式化营业时间
	const formattedHours = computed(() => {
		if (!shopInfo.value.opening_hours) return "营业时间未设置"

		// 处理多种时间格式
		const times = shopInfo.value.opening_hours.split(/[~\-]/)
		if (times.length === 2) {
			return `${times[0].trim()} - ${times[1].trim()}`
		}
		return shopInfo.value.opening_hours
	})

	// 初始化获取数据
	const init = async () => {
		try {
			const res = await queryResturantDetail(useUserStore().student_id)
			Object.assign(shopInfo.value, res.restaurant)
		} catch (error) {
			uni.showToast({
				title: '数据加载失败',
				icon: 'none'
			})
		}
	}

	init()
</script>

<style scoped>
	.container {
		padding: 32rpx;
		background: #f8fafc;
		min-height: 100vh;
	}

	/* 信息卡片样式 */
	.info-card {
		background: white;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.card-header {
		display: flex;
		align-items: center;
		margin-bottom: 48rpx;
	}

	.shop-name {
		flex: 1;
		font-size: 36rpx;
		font-weight: 600;
		color: #1e293b;
	}

	/* 信息列表样式 */
	.info-list {
		display: flex;
		flex-direction: column;
		gap: 40rpx;
	}

	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;
	}

	.label {
		width: 160rpx;
		color: #64748b;
		margin-left: 16rpx;
	}

	.value {
		flex: 1;
		color: #2c3e50;
		font-size: 28rpx;
		font-weight: 500;
	}

	/* 详细信息区块 */
	.detail-sections {
		background: white;
		border-radius: 16rpx;
		padding: 32rpx;
	}

	.section {
		margin-bottom: 48rpx;
	}

	.section-header {
		position: relative;
		margin-bottom: 32rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #1e293b;
		padding-right: 24rpx;
		background: white;
		position: relative;
		z-index: 1;
	}

	.decor-line {
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		height: 1rpx;
		background: #e2e8f0;
		z-index: 0;
	}

	.section-content {
		color: #64748b;
		line-height: 1.6;
	}

	/* 资质图片滚动 */
	.license-scroll {
		white-space: nowrap;
	}

	.license-image {
		width: 300rpx;
		height: 200rpx;
		border-radius: 12rpx;
		margin-right: 24rpx;
	}

	/* 新增评分样式 */
	.rating-box {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.rating-text {
		color: #f39c12;
		font-size: 28rpx;
		font-weight: 500;
	}
</style>